<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 222px;
				height: 222px;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				setInterval("createDiv()", 5000);
				setInterval("yiDong()", 100);
			}

			function createDiv() {
				var div = document.createElement("div");
				i = parseInt(Math.random() * 3);
				div.style.backgroundImage = "url(img/ch" + i + ".png)";
				div.setAttribute("x", 0);
				div.setAttribute("y", 0);
				div.setAttribute("rx", parseInt(Math.random() * 10) + 3);
				div.setAttribute("ry", parseInt(Math.random() * 10) + 3);
				document.body.appendChild(div)
			}

			function yiDong() {
				var divs = document.getElementsByTagName("div");
				var bodyw = document.documentElement.clientWidth;
				var bodyh = document.documentElement.clientHeight;
				for (i = 0; i < divs.length; i++) {
					var x = parseInt(divs[i].getAttribute("x"));
					var y = parseInt(divs[i].getAttribute("y"));
					var rx = parseInt(divs[i].getAttribute("rx"));
					var ry = parseInt(divs[i].getAttribute("ry"));
					x += rx;
					y += ry;
					divs[i].style.left = x + "px";
					divs[i].style.top = y + "px";
					if (y + 222 + Math.abs(ry) > bodyh) {
						ry *= -1;
					} else if (x + 222 + Math.abs(rx) > bodyw) {
						rx *= -1;
					} else if (y < 0) {
						ry *= -1;
					} else if (x < 0) {
						rx *= -1;
					}
					divs[i].setAttribute("x", x);
					divs[i].setAttribute("y", y);
					divs[i].setAttribute("rx", rx);
					divs[i].setAttribute("ry", ry);
				}
			}
		</script>
	</head>

	<body>
		<!--<input type="button" name="" id="" value="tianjia" onclick="createDiv()" />-->
		<!--<div x="0" y="0" rx="10" ry="10"> </div>-->
	</body>

</html>